<template>
  <div class="container">
     <!--el-carousel轮播图(走马灯)组件  -->
   <el-carousel>
     <!-- 根据数据循环渲染内容-->
    <el-carousel-item v-for="(item,index) in banners" :key="index">
       <!--`url(${item.url}})`是模板字符串  -->
      <div class="banner-image"  v-bind:style="{backgroundImage: `url(${item.url })`}"></div>
    </el-carousel-item>
   </el-carousel>
   <!-- 搜索框 -->
   <div class="banner-content">
        <div class="search-bar">
       <!-- tab栏 -->
        <el-row 
          type="flex" 
          class="search-tab">
       <span 
          v-for="(item, index) in options" 
          :key="index" 
         v-bind:class="{active: currentOption ==index }"
         v-on:click="handleOption(index)">
             <i>{{item.name}}</i>
      </span>
        </el-row>
 
      <!-- 输入框 -->
       <el-row 
          type="flex" 
          align="middle" 
          class="search-input">
      <input 
         :placeholder="options[currentOption].placeholder" 
         v-model="searchValue"
         @keyup.enter="handleSearch"/>
       <i class="el-icon-search" @click="handleSearch"></i>
       </el-row>
        </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data(){
    return{
       banners:[],
       options: [ // 搜索框tab选项
                 {
                    name: "攻略", 
                    placeholder: "搜索城市", 
                    pageUrl: "/post?city="
                 },
                 {
                    name: "酒店", 
                    placeholder: "请输入城市搜索酒店", 
                    pageUrl: "/hotel?cityName="},
                 {
                   name: "机票", 
                   placeholder: "请输入出发地", 
                   pageUrl: "/air"
                 }
               ],
                  searchValue: "", // 搜索框的值
                  currentOption: 0,  // 当前选中的选项 
           }
  },
  mounted(){
    
    //调用methods中函数必须用this调用
    this.getBanners()
  },
  methods:{
    //保存当前用户点击按钮的下标值
    handleOption(index){
      this.currentOption =index
      console.log(this.currentOption)
      //根据下标值获取当前点击的按钮数据
      let item = this.options[this.currentOption]
      if(item.name == '机票'){
        //跳转到机票页面
        //this.$router.push(跳转的路径)是页面跳转的方法
        this.$router.push(item.pageUrl)
      }
    },
    handleSearch(){
      let curSearch = this.options[this.currentOption]
      this.$router.push(curSearch.pageUrl+this.searchValue)
    },
    getBanners(){
      //$axios的使用
      // console.log(this.$axios)
      this.$axios({
        url:'/scenics/banners'
      }).then(res=>{
        console.log('后端返回的数据:',res)
        this.banners = res.data.data
        for(let i=0; i<this.banners.length; i++){
          //this.$axios.defaults.baseURL是接口基地址
          this.banners[i].url = this.$axios.defaults.baseURL + this.banners[i].url
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

.container{
    min-width:1000px;
    margin:0 auto;
    position:relative;

/deep/ .el-carousel__container{
    height:700px;
    }

.banner-image{
        width:100%;
        height:100%;
    }

.banner-content{
        z-index:9;
        width:1000px;
        position:absolute;
        left:50%;
        top:45%;
        margin-left: -500px;
        border-top:1px transparent solid;

.search-bar{
        width:552px;
        margin:0 auto;
      }

.search-tab{
 .active{
i{ color:#333;}
&::after{background: #eee;}
     }

span{
        width:82px;
        height:36px;
        display:block;
        position: relative;
        margin-right:8px;
        cursor: pointer;

i{
        position:absolute;
        z-index:2;
        display: block;
        width:100%;
        height:100%;
        line-height:30px;
        text-align:center;
        color:#fff;
       }

&:after{
        position: absolute;
        left:0;
        top:0;
        display:block;
        content: "";
        width:100%;
        height:100%;
        border: 1px rgba(255,255,255,.2) solid;
        border-bottom: none;
        transform: scale(1.1,1.3) perspective(.7em) rotateX(2.2deg);
        transform-origin: bottom left;
        background: rgba(0,0,0,.5);
        border-radius:1px 2px 0 0;
        box-sizing:border-box;
        }
     }
  }

.search-input{
        width:550px;
        height:46px;
        background:#fff;
        border-radius: 0 4px 4px 4px;
        border: 1px rgba(255,255,255,.2) solid;
        border-top:none;
        box-sizing: unset;

    input{
        flex:1;
        height:20px;
        padding: 13px 15px;
        outline: none;
        border:0;
        font-size:16px;
            }

    .el-icon-search{
        cursor :pointer;
        font-size:22px;
        padding:0 10px;
        font-weight:bold;
            }
        }
    }
          }
</style>